<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>示例demo</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
</body>
<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).extend({
        layuiTableColumnEdit:'js/layuiTableColumnEdit'
    }).use(['table','layuiTableColumnEdit','layer'], function () {
        var table = layui.table, layer = layui.layer;
        var layuiTableColumnEdit = layui.layuiTableColumnEdit;
        var $ = layui.$;

        table.render({
            elem: '#tableId'
            , id: 'id'
            , url: 'tableData.json'
            , height: 'full-90'
            // , page: true
            , cols: [[
                {type: 'checkbox'}
                , {field: 'name', title: 'table输入框', width: 120}
                , {field: 'age', title: 'table点击事件', width: 120, event: 'age', sort: 'true'}
                , {field: 'state', title: 'ajax传参', width: 120}
                , {field: 'test', title: '数组传参', width: 120, sort: 'true'}
            ]],
            done: function (res, curr, count) {
            }
        });

        // table.on('tool(tableEvent)', function(obj){
        //     if(obj.event === 'age'){
        //         var td = $(obj.tr).find("td[data-field='age']")[0];
        //         $.getJSON('selectData.json',{},function (result) {
        //             layuiTableColumnEdit.createSelect({
        //                 data:result.data,
        //                 element:td,
        //                 //enabled:true,//true：开启多选，false：单选。默认为false
        //                 callback:function (obj1) {
        //                     console.log(obj1.select); //下拉选项数据
        //                     console.log(obj1.td); //当前单元格（td）DOM元素
        //                     obj.update({age: parseInt(obj1.select.name)});
        //                     //把选择的显示数据更新到单元格中显示
        //                     layuiTableColumnEdit.update({element:td,value:obj1.select.value});
        //                     var testTd = $(obj.tr).find("td[data-field='test']")[0];
        //                     var selectParams = [
        //                         {name: 1, value: "张三1"},
        //                         {name: 2, value: "张三2"},
        //                         {name: 3, value: "张三3"},
        //                         {name: 4, value: "张三4"},
        //                         {name: 5, value: "张三5"}
        //                     ];
        //                     $(testTd).bind('click',function () {
        //                         layuiTableColumnEdit.createSelect({
        //                             element: this,
        //                             data: selectParams,
        //                             callback: function (obj2) {
        //                                 console.log(obj2.select); //下拉选项数据
        //                                 console.log(obj2.td); //当前单元格（td）DOM元素
        //                                 //把选择的数据更新到行数据中
        //                                 obj.update({test: parseInt(obj2.select.name)});
        //                                 //把选择的显示数据更新到单元格中显示
        //                                 layuiTableColumnEdit.update({element:testTd,value:obj2.select.value});
        //                             }
        //                         });
        //                     });
        //                 }
        //             });
        //         });
        //     }
        // });

    });
</script>
</html>